<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>旋转地球</title>
		<style>
			body{
				margin-top: 100px;
			}
			.earth-rotate{
				margin: 0 auto;/* 横向居中 */
				
				width: 310px;
				height: 310px;/* 背景图片, 不平铺 */
				
				background-image:url(audio/earth.png);
				
				/*圆角*/
				border-radius: 160px;/* 圆角，超过半径就都成圆 */
				
				/*旋转
				谷歌提供动画
				run动画名称，2s执行
				旋转轨迹：lifinite无限次循环
				*/
				-webkit-animation: run 2s linear 0s infinite ;
			}
			/*谷歌浏览器提供关键帧写法*/
			@-webkit-keyframes run{
				/*0-360旋转一周*/
				from{-webkit-transform: rotate(0deg);}
				to{-webkit-transform: rotate(360deg);}
			}
			.earth-rotate:hover{
				/*暂停动画的播放。play-state*/
				-webkit-animation-play-state: paused;
			}
		</style>
	</head>
	<body>
	</body>
	<div class="earth-rotate"></div>
</html>
